<template>
  <!-- 彩蛋 -> 自我介绍页面 -->
  <div class="main">
    <div id="app">
      <div class="introduction">
        <div class="progress" ref="progressRef">
          已阅读{{ progess.toFixed(1) }}%
        </div>
        <div class="head">
          <h1>关于我</h1>
          <p>这是关于我的小小的自述</p>
          <p>(开发ing...)</p>
        </div>

        <!-- 栏 -->
        <div class="railing">
          <!-- 日期时间 -->
          <div class="data">
            <img
              src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%97%A5%E5%8E%86.png"
            />
            <span class="time">{{ myInfo.createTime }}</span>
            <span class="updateTime">(更新于{{ myInfo.updateTime }})</span>
          </div>
        </div>

        <!-- 卡片 -->
        <div class="card">
          <div class="title" v-html="myInfo.story"></div>
        </div>
      </div>
      <div class="menu">
        <div class="progress">已阅读{{ progess.toFixed(1) }}%</div>
        <div class="title">目录</div>
        <div class="h" v-for="(item, index) in tableOfContent" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script setup>
import { getMyInfoCardService } from "@/api/MyInfo";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { useScroll, useEventListener } from "@vueuse/core";
import gsap from "gsap";
import Footer from "@/views/home/components/Footer.vue";

// 检测是否为移动端
const isMobileView = ref(false);

// 个人信息
const myInfo = ref({});
// 阅读进度
const progressRef = ref();
const progess = ref(100);

const { y } = useScroll(window);
const handleScroll = () => {
  const scrollHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  progess.value = (y.value / scrollHeight) * 100;
};
useEventListener("scroll", handleScroll);

const progressAnimate = () => {
  const progressAn = progressRef.value;
  gsap.set(progressAn, {
    scale: 0,
    transformOrigin: "center",
  });
  gsap.to(progressAn, {
    scale: 1,
    duration: 1,
    ease: "power2.out",
    onUpdate: () => {
      const currentScale = gsap.getProperty(progressAn, "scale");
      const newProgress = 100 - 100 * currentScale;
      gsap.to(progess, {
        value: newProgress,
        duration: 0,
      });
    },
  });
};

// 目录
const tableOfContent = ref([]);

const analysis = () => {
  // 解析生成目录
  const cardElement = document.querySelector("#app .card");
  if (cardElement) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(cardElement.innerHTML, "text/html");
    const h1Elements = doc.querySelectorAll("h1");
    const toc = [];
    h1Elements.forEach((h1, index) => {
      h1.id = `h1-${index}`;
      toc.push(h1.textContent.trim());
    });
    tableOfContent.value = toc;
  }
};

/**
 * 查询可用个人卡片信息数据
 */
const getMyInfo = async () => {
  const { data } = await getMyInfoCardService();
  myInfo.value = data;
};

onMounted(() => {
  getMyInfo();
  progressAnimate();
  setTimeout(() => {
    analysis();
  }, 100);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  .introduction {
    width: 70vw;
    margin: 0 auto;
    padding: 10vh 5vw;

    @media (max-width: 768px) {
      width: 100%;
      padding: 5vh 2vw;
      background: url(https://vue-wj.oss-cn-beijing.aliyuncs.com/images/IMG_5078.JPG)
        center;
      background-size: contain;
    }

    .progress {
      position: fixed;
      z-index: 999;
      top: 50px;
      right: 50%;
      height: 33px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 33px;
      background-color: #111;
      color: #fff;
      opacity: 0;
      pointer-events: none;

      @media (max-width: 768px) {
        top: 0px;
        right: 135px;
        padding: 15px;
        opacity: 1;
        pointer-events: all;
      }
    }

    .head {
      p {
        height: 42px;
        line-height: 42px;
        margin: 10px 0px;
        font-size: 18px;
        font-family: "Courier New", Courier, monospace;
      }
    }

    .railing {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      min-height: 5vh;
      margin: 20px 0px;
      padding: 0px 5px;

      .data {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-basis: auto;
        img {
          width: 24px;
        }
        .time {
          font-size: 17px;
          color: rgb(91, 90, 90);
          font-family: "Courier New", Courier, monospace;
        }
        .updateTime {
          color: rgb(91, 90, 90);
        }
      }
    }

    .card {
      margin: 36px 0px;
      min-height: 30vh;
      padding: 24px;
      border-radius: 12px;
      background: linear-gradient(to right, #cbe8f499, #ffffffac);

      @media (max-width: 768px) {
        background: transparent;
      }

      .title {
        font-size: 18px;
        letter-spacing: 5px;
        font-family: "Courier New", Courier, monospace;

        :deep(img) {
          max-width: 100%;
          display: flex;
          margin: 16px auto;
          border-radius: 7px;
        }

        :deep(h1, h2, h3, h4, h5, h6) {
          margin-top: 24px;
          margin-bottom: 16px;
          line-height: 1.25;
        }

        :deep(p) {
          line-height: 1.6;
          font-weight: 500;
        }
      }
    }
  }
  .menu {
    position: fixed;
    top: 50%;
    right: 5%;
    width: 200px;
    height: 360px;

    @media (max-width: 768px) {
      display: none;
    }

    .progress {
      margin: 20px 0px;
      font-size: 15px;
    }

    .title {
      font-size: 17px;
      height: 36px;
      line-height: 36px;
    }

    .h {
      text-indent: 2em;
      font-size: 14px;
      color: #50506a;
    }
  }
}
</style>